<template>
  <div id="myList">
    <a-form :model="pagination" layout="inline">
      <a-form-item field="title" label="名称" style="min-width: 280px">
        <a-input v-model="pagination.title" placeholder="请输入名称"/>
      </a-form-item>
      <a-form-item field="tags" label="标签" style="min-width: 280px">
        <a-input-tag v-model="pagination.tags" placeholder="请输入标签"/>
      </a-form-item>
      <a-form-item>
        <a-space wrap>
          <a-button type="primary" @click="handleSearch">搜索</a-button>
          <a-button type="primary" status="warning" @click="handleReset"
          >重置
          </a-button>
          <a-button type="primary" status="success" @click="createRoom" style="position: absolute; right: 0"
          >创建房间
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <a-table
        :data="data"
        :pagination="{
            total: pagination.total,
            pageNum: pagination.pageNum,
            pageSize: pagination.pageSize,
          }"
        @page-change="changePage"
        column-resizable
        :columns="columns"
        style="margin-bottom: 20px"
    >
      <template #empty>
        <a-empty>
          先创建房间吧
        </a-empty>
      </template>
      <template #tags="{ record }">
        <a-space wrap>
          <a-tag v-for="tag in record.tags" :key="tag" color="green"
          >{{ tag }}
          </a-tag>
        </a-space>
      </template>
      <template #type="{ record }">
        <a-tag v-if="record.type == RoomTypeEnum.PUBLIC.code" :color="RoomTypeEnum.PUBLIC.color">
          {{ RoomTypeEnum.PUBLIC.text }}
        </a-tag>
        <a-tag v-else-if="record.type == RoomTypeEnum.SECRET.code" :color="RoomTypeEnum.SECRET.color">
          {{ RoomTypeEnum.SECRET.text }}
        </a-tag>
        <a-tag v-else-if="record.type == RoomTypeEnum.PRIVATE.code" :color="RoomTypeEnum.PRIVATE.color">
          {{ RoomTypeEnum.PRIVATE.text }}
        </a-tag>
      </template>
      <template #avatar="{ record }">
        <a-avatar shape="square">
          <img alt="avatar" :src="record.avatar"/>
        </a-avatar>
      </template>
      <template #count="{ record }">
        {{ record.count ?? 0 + '/' + record.maxMembers }}
      </template>
      <template #createTime="{ record }">
        {{ moment(record.createTime).format("YYYY-MM-DD") }}
      </template>
      <template #optional="{ record }">
        <a-link status="normal" @click.prevent="intoRoom(record.id)">进入</a-link>
        <a-link v-if="record.isMy" status="warning" @click.prevent="editRoom(record.id)">管理</a-link>
        <a-link v-else status="danger" @click.prevent="quitRoom(record.id)">退出</a-link>
      </template>
    </a-table>
    <a-modal v-model:visible="createRoomShow"
             :simple="true"
             :closable="true"
             :align-center="false"
             :footer="false"
             :top="20"
             :hide-title="true"
             :modal-style="{width: '40vw', height: '80vh', background: 'rgba(0, 0, 0, 0)', padding: '0'}">
      <CreateRoom/>
    </a-modal>
  </div>
</template>


<script lang="ts" setup>
import {onMounted, ref} from "vue";
import moment from "moment";
import {RoomTypeEnum} from "/src/common/enums/room"
import CreateRoom from "./CreateRoom.vue";
import {useRouter} from "vue-router";
import {RoomControllerService} from "../../apis";
import {Message} from "@arco-design/web-vue";
import {useStore} from "vuex";

const router = useRouter();
const store = useStore();
const columns = [
  {
    title: "房号",
    dataIndex: "id",
  },
  {
    title: "头像",
    slotName: "avatar",
  },
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "描述",
    dataIndex: "description",
    width: 350
  },
  {
    title: "类型",
    slotName: "type",
  },
  {
    title: "标签",
    slotName: "tags",
  },
  {
    title: "人数",
    slotName: "count",
  },
  {
    title: "房主",
    dataIndex: "owner",
  },
  {
    title: "创建时间",
    slotName: "createTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];
const data = ref([]);
const pagination = ref({
  title: "",
  tags: [],
  total: 5,
  pageSize: 5,
  pageNum: 1,
});
const createRoomShow = ref(false);
let loginUser = store.getters["user/loginUser"];

const editRoom = (id) => {
  createRoomShow.value = true;
}
const createRoom = () => {
  createRoomShow.value = true;
}
const quitRoom = async (roomId) => {
  const res = await RoomControllerService.quit(roomId);
  if (res.code === 200) {
    Message.success("退出成功");
    getData();
  } else {
    Message.error(res.msg);
  }
}

const changePage = (pageNum) => {
  pagination.value.pageNum = pageNum;
  getData();
};
const handleSearch = () => {
  pagination.value.pageNum = 1;
  getData();
};
const handleReset = () => {
  pagination.value.pageNum = 1;
  pagination.value.tags = [];
  pagination.value.title = "";
  getData();
};
const intoRoom = (id) => {
  router.push({
    name: "QuestionRoom"
  })
}

const getData = async () => {
  const res = await RoomControllerService.listMyRoom({...pagination.value})
  loginUser = await store.getters["user/loginUser"];
  if (res.code === 200) {
    data.value = res.data.records;
    data.value.forEach((item) => {
      item.isMy = item.createBy === loginUser.userId;
      item.owner = item.createUser.nickName;
      item.tags = JSON.parse(item.tags)
    });
    pagination.value.total = res.data.total;
  } else {
    Message.error(res.msg)
  }
};

onMounted(() => {
  getData();
});
</script>


<style scoped>

</style>
